import React, { Component, } from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import HomeSelector from '../../../app/selectors/home';
import * as HomeActions from '../../../app/actions/home';
import connect from '../../../app/store/connect';
import HearItem from './headerItem';
import ImagePicker from './ImagePicker';
import { Form, } from './common-ui/Form';
import Radio from './common-ui/Radio';
import { Input, } from './common-ui/Input';
import DatePicker from './common-ui/Date-Picker/picker';
import { POST, } from '../../../commons/utils/request';
import urls from '../../../app/constants/urls';

const styles = StyleSheet.create({
  txtKey: {
    color: '#212121',
  },
  txtTip:{
    color: '#212121',
    marginRight: 2, 
  },
  dataPicker: {
    position: 'absolute',
    right: 10,
    top: -30,
    color: '#212121',
  },
});

export default class BusiLicense extends Component {
  constructor(p) {
    super(p);
    this.state = {
      filters: {
        licenseFileId: '',
        // 营业执照
        nameCn: '',
        nameEn: '',
        uniqueCode: '',
        province: '',
        city: '',
        county: '', // 区
        address: '',
        startDate: '',
        expireDate: '',
      },
      validateResults: {},
      companyInfo: null,
    };
  }

  componentWillReceiveProps(nextProps) {
    console.log('TAGGG', `componentWillReceiveProps====BusiLicense==${JSON.stringify(nextProps.licenseInfo)}`);
    if (nextProps && nextProps.companyInfo) {
      let _info = nextProps.companyInfo.licenseInfo;
      this.setState({
        companyInfo: nextProps.companyInfo,
        filters: {
          ...this.state.filters,
          ..._info,
        },
      });
    }
  }

  handleChangeFilter(key, value) {
    this.setState({
      filters: {
        ...this.state.filters,
        [key]: value,
      },
    });
  }

  getBusiLicense = () => {
    return {
      licenseFileId : this.state.filters.licenseFileId,
      licenseInfo: {
        ...this.state.filters,
      }
    }
  }

  updateImageId(id) {
    this.handleChangeFilter('licenseFileId', id);
  }

  renderItem(title, placeholder, inputId, inputValue, showDevideLine, showTip, useImagePicker) {
    let _imgUrl = '';
    if (useImagePicker && this.state.companyInfo) {
      _imgUrl = this.state.filters.fileUrl;
    }
    return (
      <Form.Item
        style={{ paddingVertical: 13, }}
        label= {
          <View style={{flexDirection: 'row', alignItems: 'center', width: 90, marginRight: 32, }}>
            {showTip ? <Text style={{ color: '#212121', marginRight: 2, }}>*</Text> : <View/>}
            <Text style = {styles.txtKey}>{title}</Text>
          </View>
        }
        hasLine={showDevideLine}
      >
        {
          useImagePicker?
          <ImagePicker OnImageId={(id) => {
            this.updateImageId(id)
          }} imgUrl={_imgUrl} />
          :
          <Input testID={inputId} value={inputValue} placeholder={placeholder} onChange={(value) => { this.handleChangeFilter(inputId, value); }} />   
        }     
      </Form.Item>
    )
  }

  renderDatePickerItem(title, placeholder, inputId, inputValue, showDevideLine, showTip, uploadType) {
    return (
      <Form.Item
      style={{ paddingVertical: 13, }}
      label={
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            width: 90,
            marginRight: 32,
          }}
        >
          <Text style={{ color: '#212121', marginRight: 2, }}>*</Text>
          <Text style = {styles.txtKey}>{title}</Text>
        </View>
      }
      hasLine
    >
      <View style={{ position:'relative' }}>
          <Input testID={inputId} value={inputValue} placeholder={placeholder} editable={false} />
          <DatePicker _style={styles.dataPicker} hint={'日期组件'} onDateChange={(dataStr)=>{
            this.handleChangeFilter(inputId, dataStr);
          }}/>
      </View>
    </Form.Item>
    )
  }

  render() {
    return (
      <>
        <HearItem title={'企业证件'} />
        {this.renderItem('营业执照', '', '', '', true, true, true)}
        {this.renderItem('企业中文名称', '企业中文名称', 'nameCn', this.state.filters.nameCn, true, true, false)}
        {this.renderItem('统一社会信用代码', '统一社会信用代码', 'uniqueCode', this.state.filters.uniqueCode, true, true, false)}
        {this.renderDatePickerItem('成立日期', '请选择企业成立日期', 'startDate', this.state.filters.startDate,true, true)}
        {this.renderDatePickerItem('到期时间', '请选择企业到期日期', 'expireDate', this.state.filters.expireDate, true, true)}
      </>
    );
  }
}
